<template>
  <view>
    <u-navbar title-size="36" title="商家推广码" :is-back="true" :border-bottom="false"></u-navbar>
    <view class="wapper">
      <!-- 			<view class="qrcode-type dis-flex">
              <view class="type"  :class="qrtype == 1 ? 'checked' : ''" @click="qrtype = 1">商家推广码</view>
              <view class="type" :class="qrtype == 2 ? 'checked' : ''" @click="qrtype = 2">用户推广码</view>
            </view> -->
      <view class="qrcode-box">
        <view style="box-shadow: #ccc 0px 2px 7px 0px">
          <u-image
            v-if="qrtype == 2"
            :src="userInfo.qrcode"
            width="600rpx"
            height="600rpx"
            border-radius="16rpx 16rpx 0 0"
          ></u-image>
          <u-image
            v-if="qrtype == 1"
            :src="agencyQrcode"
            width="600rpx"
            height="600rpx"
            border-radius="16rpx 16rpx 0 0"
          ></u-image>
        </view>
        <view class="box dis-flex">
          <u-image
            :src="userInfo.avatar"
            width="120rpx"
            height="120rpx"
            border-radius="60rpx"
          ></u-image>
          <view class="r">
            <view class="name">{{ userInfo.nickname }}</view>
            <view class="des"
              >邀你加入
              <text style="color: #10a28f">[{{ appName || '本平台' }}]</text>
            </view>
          </view>
        </view>
      </view>
      <!-- #ifdef APP || H5 -->
      <view class="bt share" @click="saveImg()">保存到相册</view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="bt share" @click="shareQrcode">保存到相册</view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appName: '',
      userInfo: null,
      qrtype: 1,
      agencyQrcode: ''
    }
  },
  onLoad() {
    this.appName = uni.getAppBaseInfo().appName
    this.userInfo = uni.getStorageSync('userInfo')
    this.$u.get('/app-api/infra/qrcode/agency').then((res) => {
      this.agencyQrcode = res
    })
  },
  methods: {
    //将二维码转发
    shareQrcode() {
      let app = this
      let file = ''
      if (app.qrtype == 2) {
        file = app.userInfo.qrcode
      } else {
        file = app.agencyQrcode
      }
      wx.downloadFile({
        url: file,
        success: (res) => {
          console.log({
            success: res
          })
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success: (re) => {
              console.log({
                success1: re
              })
            },
            fail: (re) => {
              console.log({
                fail1: re
              })
            }
          })
        },
        fail: (res) => {
          console.log({
            fail: res
          })
        }
      })
    },
    saveImg() {
      // #ifdef H5
      this.$u.toast('H5不支持保存二维码到相册')
      // #endif
      // #ifndef H5
      let that = this
      uni.showModal({
        title: '友情提示',
        content: '确认要保存到相册吗？',
        success(o) {
          if (o.confirm) {
            //获取授权列表，查看是否授权写入相册权限
            uni.getSetting({
              success(res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                  uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success() {
                      that.downloadImage()
                    }
                  })
                } else {
                  that.downloadImage()
                }
              }
            })
          }
        }
      })
      // #endif
    },
    downloadImage() {
      let that = this
      let file = ''
      if (that.qrtype == 1) file = that.userInfo.qrcode
      else file = that.agencyQrcode
      uni.downloadFile({
        url: file,
        success: (res) => {
          if (res.statusCode === 200) {
            // #ifdef APP || MP
            that.saveimgtoAlbum(res.tempFilePath)
            // #endif
          }
        }
      })
    },
    saveimgtoAlbum(imgurl) {
      //图片保存到本地
      let that = this
      uni.showLoading()
      uni.saveImageToPhotosAlbum({
        filePath: imgurl,
        success: function (data) {
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (err) {
          uni.hideLoading()
          if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
            uni.openSetting({
              success(settingdata) {
                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                  uni.showToast({
                    title: '您已授权成功，请重新保存',
                    icon: 'success',
                    duration: 2000
                  })
                } else {
                  uni.showToast({
                    title: '尚未授权，无法保存',
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            })
          }
        },
        complete(res) {
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wapper {
  padding: 40rpx 60rpx;
  display: flex;
  flex-flow: column;
  align-items: center;

  .qrcode-type {
    margin-bottom: 40rpx;
    justify-content: space-between;

    .type {
      width: 300rpx;
      height: 80rpx;
      background: #ffffff;
      border-radius: 40rpx;
      font-size: 32rpx;
      color: #10a28f;
      text-align: center;
      line-height: 80rpx;
    }

    .checked {
      background: #10a28f;
      color: #ffffff;
    }
  }

  .qrcode-box {
    width: 600rpx;
    height: 784rpx;
    background: #ffffff;
    border-radius: 16rpx;

    .box {
      padding: 32rpx 20rpx;

      .r {
        display: flex;
        flex-flow: column;
        justify-content: center;
        font-size: 28rpx;
        color: #333333;
        margin-left: 17rpx;

        .des {
          font-size: 24rpx;
          color: #666666;
          margin-top: 8rpx;
        }
      }
    }
  }

  .bt {
    width: 610rpx;
    height: 96rpx;
    background: #ffffff;
    border-radius: 48rpx;
    margin-top: 40rpx;
    font-size: 36rpx;
    color: #10a28f;
    text-align: center;
    line-height: 96rpx;
  }

  .share {
    margin-top: 80rpx;
    background: #10a28f;
    color: #ffffff;
  }
}
</style>
